<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4609723_o1v0a0edqf.css">
</head>
<style>
    .active{
        color: red;
    }
    .c{
        
        width:150px;
        border: 1px solid black;
        margin-top: 10px;
        text-align: center;
    }
    .cactive{
        display: block;
        list-style-type: none;
        width:150px;
        border: 1px solid red;
        margin-top: 10px;
        text-align: center;
    }
</style>
<body>
    <div id="app">
    <h1>给新闻订单的评价</h1>
    <hr>
    <p>请严肃认真对待此次评价哦！您的评价对我们真的真的非常重要！</p>
    <span class="iconfont icon-xingxing" :class="{active:show<=5||show0<=5}"  @mouseover="show=5" @mouseout="show=10" @click="show0=5"></span>
    <span class="iconfont icon-xingxing" :class="{active:show<=4||show0<=4}" @mouseover="show=4" @mouseout="show=10" @click="show0=4"></span>
    <span class="iconfont icon-xingxing" :class="{active:show<=3||show0<=3}" @mouseover="show=3" @mouseout="show=10" @click="show0=3"></span>
    <span class="iconfont icon-xingxing" :class="{active:show<=2||show0<=2}" @mouseover="show=2" @mouseout="show=10" @click="show0=2"></span>
    <span class="iconfont icon-xingxing" :class="{active:show<=1||show0<=1}" @mouseover="show=1" @mouseout="show=10" @click="show0=1"></span>
    <p>本次交易，乖，摸摸头 给您留下了什么印象呢？</p>
    <div class="c" @click="choose1=!choose1" :class="{cactive:choose1===true}">专业水平高<span v-show="choose1===true" style="color: red;">√</span></div>
    <div class="c" @click="choose2=!choose2" :class="{cactive:choose2===true}">效果明显<span v-show="choose2===true" style="color: red;">√</span></div>
    <div class="c" @click="choose3=!choose3" :class="{cactive:choose3===true}">能力待提高<span v-show="choose3===true" style="color: red;">√</span></div>
    <div class="c" @click="choose4=!choose4" :class="{cactive:choose4===true}">交付准时<span v-show="choose4===true" style="color: red;">√</span></div>
    <div class="c" @click="choose5=!choose5" :class="{cactive:choose5===true}">数据分析准确<span v-show="choose5===true" style="color: red;">√</span></div>
    <div class="c" @click="choose6=!choose6" :class="{cactive:choose6===true}">工期延误<span v-show="choose6===true" style="color: red;">√</span></div>
    <textarea style="width: 700px;height: 200px;" maxlength="150" v-model="val"></textarea>
<p>还可以输入{{150-val.length}}个字</p>
<button @click="pj">评价完成</button>
</div>
</body>
<script src="vue.global.js"></script>
<script>
    const {createApp,ref}=Vue
    createApp({
        setup(){
            let show=ref(10)
            let show0=ref(10)
            
            let choose1=ref(false)
            let choose2=ref(false)
            let choose3=ref(false)
            let choose4=ref(false)
            let choose5=ref(false)
            let choose6=ref(false)
            let val=ref('')
            function pj(){
                alert('感谢你的评价，么么哒')
            }
            return{
                show,show0,choose1,choose2
                ,choose3,choose4,choose5,choose6,val,pj

            }
        }
    }).mount("#app")
</script>
</html>